<template>
  <view class="container">
    <view class="list">
      <view class="multi-item">
        <view class="multi-text-child">
          <view class="title">身份认证</view>
          <view class="desc">应监管要求，请先进行身份认证</view>
        </view>
        <view class="multi-item-child">
          姓名
          <view class="content">
            <input class="uni-input text" placeholder="填写真实姓名" v-model="name" />
          </view>
        </view>
        <view class="multi-item-child">
          身份证号
          <view class="content">
            <input type="idcard" class="uni-input text" placeholder="填写身份证号" v-model="card_no" />
          </view>
        </view>
        <view class="multi-item-child">
          电话
          <view class="content">
            <input type="tel" class="uni-input text" placeholder="填写电话" v-model="phone" />
          </view>
        </view>
        <view class="multi-item-child">
          有效期限
          <view class="content">
            <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
              <view class="picker-inner">
                <text class="text">{{date || '请选择'}}</text>
                <view class="iconfont icon-jiantou _font-10" style="color: #bdbdbd;"></view>
              </view>
            </picker>
          </view>
        </view>
      </view>
    </view>
    <view class="auth-item-box idcard-box">
      <view class="title">本人身份证</view>
      <view class="desc">请确保证件边框完成、字体清晰、亮度均匀</view>
      <!-- <image class="auth-img1" src="" @click="upLoadIDcard_one()"></image> -->
      <image class="auth-img1" :src="card_a ? card_a : './static/person_auth_img1.png'" @click="upLoadIDcard_one()">
      </image>
      <image class="auth-img2" :src="card_b ? card_b : './static/person_auth_img2.png'" @click="upLoadIDcard_two()">
      </image>
    </view>
    <view class="operate-box" @tap="onSumbmit">提交认证</view>
    <view class="company-auth" @tap="onCompanyAuth">企业认证</view>
  </view>
</template>

<script>
  import {
    getContactInfo
  } from '@/api/car.js';
  import {
    carAuth
  } from '@/api/info_setting.js';

  export default {
    data() {
      return {
        //  date: this.getDate({
        //     format: true
        // }),
        date: '',
        name: '',
        card_no: '',
        phone: '',
        card_a: '',
        card_b: '',
        contact_id: 0,
        company_contact_id: 0,
      }
    },
    computed: {
      startDate() {
        return this.getDate('start');
      },
      endDate() {
        return this.getDate('end');
      }
    },
    onLoad(option) {
      console.log('option', option)
      if (option) {
        this.contact_id = option.contact_id;
        this.company_contact_id = option.company_contact_id;
        this.getContactInfo();
      }
    },
    onShow() {

    },
    methods: {
      // 获取驾驶员详情
      getContactInfo() {
        var that = this;
        getContactInfo({
          contact_id: that.contact_id
        }).then(res => {
          console.log('res-----.', res)
          let {
            name,
            card_no,
            phone,
            card_a,
            card_b,
            validity_period
          } = res.data
          this.name = name;
          this.card_no = card_no;
          this.phone = phone;
          this.card_a = card_a;
          this.card_b = card_b;
          // 有效期限
          this.date = validity_period
        })
      },
      //上传身份证正面照片
      upLoadIDcard_one: function() {
        let that = this
        that.$util.uploadImageOne('upload/image', (res) => {
          that.card_a = res.data.url;
        });
      },
      //上传身份证反面照片
      upLoadIDcard_two: function() {
        let that = this;
        that.$util.uploadImageOne('upload/image', (res) => {
          that.card_b = res.data.url;
        });
      },
      onSumbmit() {
        let {
          name,
          card_no,
          date,
          card_a,
          card_b,
          phone,
          contact_id
        } = this
        if (!name) {
          uni.showToast({
            icon: 'none',
            title: '请填写真实姓名'
          })
          return;
        }
        if (!card_no||card_no.length!==8) {
          uni.showToast({
            icon: 'none',
            title: '请正确填写18位身份证号'
          })
          return;
        }
        if (!phone) {
          uni.showToast({
            icon: 'none',
            title: '请填写电话'
          })
          return;
        }
        if (!date) {
          uni.showToast({
            icon: 'none',
            title: '请选择有效期限'
          })
          return;
        }
        if (!card_a) {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证人像页'
          })
          return;
        }
        if (!card_b) {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证国徽页'
          })
          return;
        }
        let params = {
          name: name,
          card_no: card_no,
          validity_period: date,
          card_a: card_a,
          card_b: card_b,
          phone: phone,
          type: 1, // 个人
        }
        if (contact_id && contact_id != 0) {
          params.id = contact_id
        }
        carAuth(params).then(res => {
          console.log('res', res)
          if (res.status == 200) {
            uni.showToast({
              icon: 'none',
              title: '提交成功',
              success() {
                uni.navigateBack()
              }
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        }).catch((err) => {
          uni.showToast({
            title: err,
            icon: 'none'
          })
        })
      },
      bindDateChange: function(e) {
        this.date = e.detail.value
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
      onCompanyAuth() {
        let url = `/pages/info_setting/company_auth?company_contact_id=${this.company_contact_id}` // 企业认证
        uni.navigateTo({
          url,
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    min-height: 100vh;
    background-color: rgb(248, 249, 252);
  }

  .container {
    padding: 32rpx;
  }

  .list {}

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.9);
    padding: 32rpx 28rpx;
    border-radius: 10rpx;
    margin-bottom: 24rpx;
  }

  .multi-item {
    width: 686rpx;
    padding: 32rpx 28rpx;
    margin-bottom: 24rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .multi-text-child {
      .title {
        margin-bottom: 24rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #111E36;
      }

      .desc {
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.6);
      }
    }

    .multi-item-child {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 0;

      .content {
        display: flex;
        align-items: center;
        text-align: right;

        .text {
          margin-right: 10rpx;
          font-size: 28rpx;
          color: #333;
          text-align: right;
        }

        .picker-inner {
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .auth-item-box {
    padding: 40rpx 24rpx;

    .title {
      margin-bottom: 20rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: #000000;
    }

    .desc {
      font-size: 28rpx;
      color: #666666;
    }

    .auth-img1 {
      width: 582rpx;
      height: 396rpx;
      display: block;
      margin: 70rpx auto 80rpx;
    }

    .auth-img2 {
      width: 582rpx;
      height: 396rpx;
      display: block;
      margin: 40rpx auto 0;
    }

    .auth-img3 {
      width: 526rpx;
      height: 340rpx;
      display: block;
      margin: 40rpx auto 0;
    }
  }

  .operate-box {
    width: 686rpx;
    height: 96rpx;
    line-height: 96rpx;
    margin: 40rpx auto 30rpx;
    box-sizing: border-box;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #FFFFFF;
    background: #008DFF;
    text-align: center;
    border-radius: 12rpx;
  }

  .company-auth {
    font-size: 30rpx;
    color: #008DFF;
    margin: 30rpx auto 20rpx;
    text-align: center;
  }
</style>